<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import {sexList, shoesSize, clothesSize} from '@/utils/basicData'
  import switchRadio from '@/components/switchRadio/suitchRadio.vue'
  import inputNumber from '@/components/inputNumber/inputNumber.vue'
  import selectPicker from '@/components/selectPicker/index.vue'
  import {
    getCityData,
    getClothingScreen,
    getShoeScreen
  } from '@/api/basisData'
  const $emit = defineEmits(['change'])
  const props = defineProps({
    info:{
      type:Object
    },
    mechanism:{
      type:Boolean,
      default:false
    },
  })
  const clothesSizeList = ref([])
  const shoesSizeList = ref([])
  const signFrom = ref(props.info)
  const healthClearance = ref([
    {
      value:1,
      text:'是'
    },
    {
      value:2,
      text:'否'
    },
  ])
  const cityList = ref([])
  onMounted(() => {
    getCityData().then(res => {
      if(res.code == 200){
        cityList.value = res.data
      }else{
        cityList.value = []
      }
    }).catch(err => {
      cityList.value = []
    })
    // 获取衣服尺码
    getClothingScreen({id:props.info.eventsId}).then(res => {
      if(res.code == 200){
        clothesSizeList.value = res.data.map((item:any) => {
          return  {
            value:item,
            text:item
          }
        })
      }
    })
    // 获取鞋子尺码
    getShoeScreen({id:props.info.eventsId}).then(res => {
      if(res.code == 200){
        shoesSizeList.value = res.data.map((item:any) => {
          return  {
            value:item,
            text:item
          }
        })
      }
    })
  })
  const change = (type:any, e:any) => {
    $emit('change',{...e,type})
  }
</script>

<template>
  <view class="sign-body">
<!--    <view class="sign-item" v-if="signFrom.projectName">-->
<!--      <view class="sign-label required">项目名称</view>-->
<!--      <view class="sign-value">-->
<!--        <input type="text" v-model="signFrom.projectName"  placeholder="请输入姓名"/>-->
<!--      </view>-->
<!--    </view>-->
    <view class="sign-item">
      <view class="sign-label required">姓名</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.name"  placeholder="请输入姓名"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label required">性别</view>
      <view class="sign-value">
        <switch-radio v-model="signFrom.sex" :list="sexList"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label required">身份证</view>
      <view class="sign-value">
        <input type="idcard" v-model="signFrom.idCard" @blur="change('idCard',$event)" placeholder="请输入身份证"/>
      </view>
    </view>
    <view class="sign-item center">
      <view class="sign-label required">身高(cm)</view>
      <view class="sign-value">
        <input-number v-model="signFrom.height" unit="cm" :negative="true"/>
      </view>
    </view>

    <view class="sign-item center">
      <view class="sign-label required">体重(kg)</view>
      <view class="sign-value">
        <input-number v-model="signFrom.weight" unit="kg" :negative="true"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label required">是否健康</view>
      <view class="sign-value">
        <select-picker :columns="healthClearance" v-model="signFrom.pubIfHealthEnum"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label required">衣服尺码</view>
      <view class="sign-value">
        <select-picker :columns="clothesSizeList" v-model="signFrom.clothingSize"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label required">鞋子尺码</view>
      <view class="sign-value">
        <select-picker :columns="shoesSizeList" v-model="signFrom.shoeSize"/>
      </view>
    </view>
  </view>
  <view class="sign-body">
    <view class="sign-item">
      <view class="sign-label" :class="{required:!mechanism}">联系电话</view>
      <view class="sign-value">
        <input type="number" v-model="signFrom.mobile" placeholder="请输入联系电话"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label" :class="{required:!mechanism}">紧急联系人</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.emergencyContact"  placeholder="请输入紧急联系人"/>
      </view>
    </view>

    <view class="sign-item">
      <view class="sign-label" :class="{required:!mechanism}">紧急电话</view>
      <view class="sign-value">
        <input type="number" v-model="signFrom.emergencyContactPhoneNumber" placeholder="请输入紧急联系电话"/>
      </view>
    </view>
  </view>
  <view class="sign-body">
    <view class="sign-item">
      <view class="sign-label required">所在城市</view>
      <view class="sign-value">
        <select-picker :cascade="true" v-model="signFrom.countyId" @change="change('cityId',$event)" :columns="cityList"/>
      </view>
    </view>
    <view class="sign-item start-item">
      <view class="sign-label required">详细地址</view>
      <view class="sign-value">
        <textarea v-model="signFrom.address"></textarea>
      </view>
    </view>
    <view class="sign-item start-item">
      <view class="sign-label">个人荣誉</view>
      <view class="sign-value">
        <textarea v-model="signFrom.personalHonor" placeholder-class="placeholder-class" placeholder="曾参加比赛及名称，如有请填写"></textarea>
      </view>
    </view>
<!--    <view class="sign-tip"></view>-->
  </view>
  <view class="sign-body" v-if="!mechanism">
    <view class="sign-item">
      <view class="sign-label">推荐教练</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.recommendedCoach" placeholder-class="placeholder-class"  placeholder="如有推荐教练，请填写推荐教练"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label">推荐机构</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.recommendedInstitutions" placeholder-class="placeholder-class"  placeholder="如有推荐机构，请填写推荐机构"/>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .sign-body{
    margin: 32rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 0 32rpx;
    .sign-item{
      padding: 24rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F5F5F5;
      &.start-item{
        align-items: flex-start;
      }
      &:last-child{
        border-bottom: none;
      }
      .sign-label{
        color: #505363;
        font-size: 28rpx;
        width: 160rpx;
        &.required{
          position: relative;
          padding-left: 20rpx;
          &:before{
            content: '*';
            display: block;
            position: absolute;
            color: #ff3c3c;
            top: 0;
            left: 0;
          }
        }
      }
      .sign-value{
        width: calc(100% - 160rpx);
        font-size: 28rpx;
        color: #21252E;
        font-weight: 500;
        input{
          width: 100%;
          font-weight: 500;
        }
        textarea{
          background-color: #F7F7F7;
          border-radius: 12rpx;
          box-sizing: border-box;
          font-weight: 500;
          width: 100%;
          padding:10rpx;
          height: 150rpx;
        }
      }
    }
  }
  ::v-deep .placeholder-class{
    color: #f65d5d;
    font-weight: normal;
    font-size: 26rpx;
  }
  .sign-tip{
    color: #f65d5d;
    font-weight: normal;
    font-size: 26rpx;
  }
</style>
